<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"> 
<head>
 
    <!-- 引入 ECharts 文件 -->
	<script src="lib/jquery/jquery.min-v2.1.4.js" th:src="@{/lib/jquery/jquery.min-v2.1.4.js}"></script>
	<script src="lib/echarts_3.7.1/echarts.js" th:src="@{/lib/echarts_3.7.1/echarts.js}"></script>
    <script src="lib/common.js" th:src="@{/lib/common.js}"></script>
	
    <title>客流</title>
</head>
<body  style="background-color:#054E6D;"> 


    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 550px;height:300px;"></div>
	
	<script type="text/javascript" th:inline="javascript">
	
	var myChart = echarts.init(document.getElementById('main'));
	// 基于准备好的dom，初始化echarts实例

			

			
		$(document).ready(function(){
		try{	
		
			// 使用刚指定的配置项和数据显示图表。
			
			timedCount();
			
			
			
			
			
		}
		catch(ex){
			//
			return;
		}
	});	
	
	
			function jsonpCallback(data){
					var resultobj=data.data;
					resultobj = eval('('+resultobj+')');
					// Generate data
								var option = {
									backgroundColor: '#054E6D',
									tooltip: { //提示框组件
										trigger: 'axis',
										formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}',
										axisPointer: {
											type: 'shadow',
											label: {
												backgroundColor: '#054E6D'
											}
										},
										textStyle: {
											color: '#fff',
											fontStyle: 'normal',
											fontFamily: '微软雅黑',
											fontSize: 12,
										}
									},
									grid: {
										left: '1%',
										right: '4%',
										bottom: '6%',
										top:30,
										padding:'0 0 10 0',
										containLabel: true,
									},
									legend: {//图例组件，颜色和名字
										right:10,
										top:0,
										itemGap: 16,
										itemWidth: 18,
										itemHeight: 10,
										data:[{
											name:'进站客流',
											//icon:'image://../wwwroot/js/url2.png', //路径
										},
										{
											name:'出站客流',
										}],
										textStyle: {
											color: '#a8aab0',
											fontStyle: 'normal',
											fontFamily: '微软雅黑',
											fontSize: 12,            
										}
									},
									xAxis: [
										{
											type: 'category',
											boundaryGap: true,//坐标轴两边留白
											data: ['6:00','7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
											axisLabel: { //坐标轴刻度标签的相关设置。
												interval: 1,//设置为 1，表示『隔一个标签显示一个标签』
												margin:15,
												textStyle: {
													color: '#078ceb',
													fontStyle: 'normal',
													fontFamily: '微软雅黑',
													fontSize: 11,
												}
											},
											axisTick:{//坐标轴刻度相关设置。
												show: false,
											},
											axisLine:{//坐标轴轴线相关设置
												lineStyle:{
													color:'#fff',
													opacity:0.2
												}
											},
											splitLine: { //坐标轴在 grid 区域中的分隔线。
												show: false,
											}
										}
									],
									yAxis: [
										{
											type: 'value',
											splitNumber: 5,
											axisLabel: {
												textStyle: {
													color: '#a8aab0',
													fontStyle: 'normal',
													fontFamily: '微软雅黑',
													fontSize: 12,
												}
											},
											axisLine:{
												show: false
											},
											axisTick:{
												show: false
											},
											splitLine: {
												show: true,
												lineStyle: {
													color: ['#fff'],
													opacity:0.06
												}
											}

										}
									],
									series : [
										{
											name:'进站客流',
											type:'bar',
											data:resultobj.data.inTime,
											barWidth: 8,
											barGap:1,//柱间距离
											label: {//图形上的文本标签
												normal: {
												   show: true,
												   position: 'top',
												   textStyle: {
													   color: '#a8aab0',
													   fontStyle: 'normal',
													   fontFamily: '微软雅黑',
													   fontSize: 11,   
												   },
												},
											},
											itemStyle: {//图形样式
												normal: {
													barBorderRadius: [5, 5, 0, 0],
													color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
														offset: 1, color: 'rgba(127, 128, 225, 0.7)'
													},{
														offset: 0.9, color: 'rgba(72, 73, 181, 0.7)'
													},{
														offset: 0.31, color: 'rgba(0, 208, 208, 0.7)'
													},{
														offset: 0.15, color: 'rgba(0, 208, 208, 0.7)'
													}, {
														offset: 0, color: 'rgba(104, 253, 255, 0.7)'
													}], false),
												},
											},
										},
										{
											name:'出站客流',
											type:'bar',
											data:resultobj.data.outTime,
											barWidth: 8,
											barGap:0.1,//柱间距离
											label: {//图形上的文本标签
												normal: {
												   show: true,
												   position: 'top',
												   textStyle: {
													   color: '#a8aab0',
													   fontStyle: 'normal',
													   fontFamily: '微软雅黑',
													   fontSize: 11,   
												   },
												},
											},
											itemStyle: {//图形样式
												normal: {
													barBorderRadius: [5, 5, 0, 0],
													color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
														offset: 1, color: 'rgba(127, 128, 225, 0.7)'
													},{
														offset: 0.9, color: 'rgba(72, 73, 181, 0.7)'
													},{
														offset: 0.25, color: 'rgba(226, 99, 74, 0.7)'
													}, {
														offset: 0, color: 'rgba(253, 200, 106, 0.7)'
													}], false),
												},
											},
										}
									]
								};
								myChart.setOption(option);
					}
			
			
							var t
							function timedCount()
							{
                                                            console.log("time count");
//							SendAjax("http://localhost:8089/Dataget?dp=TEST1", "", false,
//									function (result) {
//											if (result) {
//																			}
//											else{
//												
//											}
//											
//										},
//								{ 'errormsg': '', 'errorfunction': null },
//								{ 'timeoutmsg': '', 'timeoutset': -1, 'timeoutfunction': null });
												
                                    sendAjaxRequest(/*[[@{/test/getPassengerData?type=dynamic}]]*/,null,null,function success(data){

                                    	jsonpCallback(data);
                                    })
												
									//t=setTimeout("timedCount()",1000);
							}
							
							
			
	</script>
	
</body>
</html>